<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棋类游戏科普模块</title>
    <link rel="stylesheet" href="../css/科普.css">
    <style>
        * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 24px;
}

header .user-options a {
    margin-left: 15px;
    color: #fff;
    text-decoration: none;
}

nav {
    background-color: #222;
    color: #fff;
    padding: 10px 20px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px;
}

.box {
    background-color: #75adde;
    border: 2px solid #75adde;
    padding: 20px;
    box-shadow: 0 0 10px #75adde;
}

#intro {
    background-color: #75adde;
}

#history {
    background-color:  #75adde;
}

#types {
    background-color: #75adde;
}

#benefits {
    background-color: #75adde;
}

section h2 {
    margin-bottom: 10px;
    color: #333;
}

section p {
    margin-bottom: 10px;
    color: #555;
}

ul {
    list-style: disc;
    margin-left: 20px;
    color: #555;
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
    position: relative;
    bottom: 0;
    width: 100%;
}
.title{
    text-align: left;
}
    </style>
</head>
<body>
        <!-- Header Section -->
        <header>
            <div class="logo">棋士馆</div>
            <div class="user-options">
                <a href="#">登录/注册</a>
                <a href="#">语言选择</a>
            </div>
        </header>
    
        <!-- Navigation Bar -->
        <nav>
            <ul>
                <li><a href="首页.html">首页</a></li>
                <li><a href="游戏.html">游戏</a></li>
                <li><a href="比赛.html">比赛</a></li>
                <li><a href="论坛.html">论坛</a></li>
                <li><a href="科普.html">科普</a></li>
                <li><a href="教程.html">教程</a></li>
                <li><a href="联系我们.html">联系我们</a></li>
            </ul>
        </nav>

    <main class="grid-container">
        <section id="intro" class="box">
            <div class="content">
                <h2 ><a href="五子棋科普.html">五子棋</a></h2>
                <p>五子棋是一种两人对弈的纯策略型棋类游戏，规则简单。双方分别使用黑白两色的棋子，交替落子在纵横15线的棋盘上，率先连成五子的一方获胜。</p>
            </div>
        </section>

        <section id="history" class="box">
            <div class="content">
                <h2>围棋</h2>
                <p>围棋起源于中国，已有数千年历史，是世界上最古老的棋类游戏之一。棋盘由19x19的网格构成，玩家通过围地和吃子来争夺棋盘控制权，最终占地多者胜。</p>
            </div>
        </section>

      

        <section id="benefits" class="box">
            <div class="content">
                <h2>象棋</h2>
                <p>象棋是中国传统棋种，亦称“中国象棋”，流行于华人文化圈。棋盘上有九道直线和十道横线，双方各有16个不同类型的棋子，以将死对方的“帅（将）”为胜利目标。</p>
            </div>
        </section>
    </main>
    <section id="types" class="box">
        <div class="content">
            <h2>其他棋类</h2>
            <ul>
                <li>国际象棋</li>
                <li>久棋</li>
                <li>将棋</li>
                <li>不围棋</li>
                <li>......</li>
            </ul>
        </div>
    </section>
    <footer>
        <div class="container">
            <p>&copy; 2024 传统棋类游戏平台</p>
        </div>
    </footer>
</body>
</html>
